<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        .smallmap {
            width: 300px;
        }
        
        .docs {
            padding: 0px 5px;
        }
        
        td {
            vertical-align: top;
        }
        
    </style>
    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        var SHADOW_Z_INDEX = 10;
        var MARKER_Z_INDEX = 11;
        
        var DIAMETER = 200;
        var NUMBER_OF_FEATURES = 15;
            
        var map, layer;   
            
        function init() {
            map = new OpenLayers.Map("map");
            
            layer = new OpenLayers.Layer.Vector(
                "Marker Drop Shadows",
                {
                    styleMap: new OpenLayers.StyleMap({
                        // Set the external graphic and background graphic images.
                        externalGraphic: "../img/marker-gold.png",
                        backgroundGraphic: "./marker_shadow.png",
                        
                        // Makes sure the background graphic is placed correctly relative
                        // to the external graphic.
                        backgroundXOffset: 0,
                        backgroundYOffset: -7,
                        
                        // Set the z-indexes of both graphics to make sure the background
                        // graphics stay in the background (shadows on top of markers looks
                        // odd; let's not do that).
                        graphicZIndex: MARKER_Z_INDEX,
                        backgroundGraphicZIndex: SHADOW_Z_INDEX,
                        
                        pointRadius: 10
                    }),
                    isBaseLayer: true,
                    rendererOptions: {yOrdering: true}
                }
            );
            
            map.addLayers([layer]);
            
            // Add a drag feature control to move features around.
            var dragFeature = new OpenLayers.Control.DragFeature(layer);
            
            map.addControl(dragFeature);
            
            dragFeature.activate();
                        
            map.zoomToMaxExtent();
            
            drawFeatures();
        }
        
        function drawFeatures() {
            
            layer.removeFeatures(layer.features);
            
            // Create features at random around the center.
            var center = map.getViewPortPxFromLonLat(map.getCenter());
            
            // Add the ordering features. These are the gold ones that all have the same z-index
            // and succomb to y-ordering.
            var features = [];
            
            for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
                // Calculate a random x/y. Subtract half the diameter to make some
                // features negative.
                var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
                var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
                
                var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
                
                var lonLat = map.getLonLatFromViewPortPx(pixel);
                features.push(
                    new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
                    )
                );
            }
            
            layer.addFeatures(features);
        }
        
    </script>
  </head>
  <body onload="init()">
        <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>

        <div id="tags">
        </div>

        <p id="shortdesc">
           This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
        </p>
        
        <br>

        <table>
            <tr>
                <td>
                    <div id="map" class="smallmap"></div>
                </td>
                <td>
                    <div class="docs">
                        The features in this map were generated at random. Each of these features have a <i>backgroundGraphic</i> property set in the style map to add a shadow image. Note that the background graphics are not duplicated features with a different style.
                        <br><br>
                        The shadows were set to have a different z-index than the markers themselves, using the <i>backgroundGraphicZIndex</i> property. This makes sure all shadows stay behind the markers, keeping a clean look. The shadows were also placed nicely relative to the external graphic using the <i>backgroundXOffset</i> and <i>backgroundYOffset</i> property.
                        <br><br>
                        Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <button onclick="drawFeatures()">Redraw Features</button>
                </td>
            </tr>
        </table>
        
        
    </body>
</html>
